<template>
  <div id="app">
    <div id="main" style="width: 600px; height: 400px">main</div>
    {{ fileUploadList }}
    <el-upload
      ref="upload"
      multiple
      action="http://upload.qiniup.com"
      :data="TokenQiNiu"
      :on-progress="handleProgress"
      :before-upload="uploadBefore"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :on-remove="handleRemove"
      list-type="picture"
      :file-list="fileUploadList">
      <el-button type="primary" icon="el-icon-plus">选择图片</el-button>
    </el-upload>
    <router-view />
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);

export default {
  name: 'App',
  components: {},
  data() {
    return {
      pe: process.env,
      isDev: process.env.NODE_ENV === 'development',
      testechartsopt: {
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
      qiniu: {
        token: '',
        address: 'http://qiniuoss.chenxi618.com',
      },
      fileUploadList: [],
    };
  },
  computed: {
    TokenQiNiu: function () {
      return {
        token: this.qiniu.token,
      };
    },
  },
  methods: {
    /* 上传图片相关 s */
    clearFiles() {
      this.$refs.upload.clearFiles();
      this.fileUploadList.splice(0, this.fileUploadList.length);
    },
    uploadBefore(file) {
      if (file.type != 'image/png' && file.type != 'image/jpeg') {
        this.$message({
          message: '请上传正确的图片',
          type: 'warning',
        });
        return false;
      }
      let match = file.name.match(/([^\/]+)\.(\w+)$/);
      let fileName = this.MD5(`${match[1]}${this.mock.mock('@uuid')}`);
      let extension = match[2];
      this.temp = `${fileName}.${extension}`;
      let newFile = new File([file], `${fileName}.${extension}`, {
        type: file.type,
      });
      console.log(
        '%c [ newFile ]-467',
        'font-size:13px; background:pink; color:#bf2c9f;',
        newFile
      );
      return Promise.resolve(newFile);
    }, // 上传之前回调
    handleProgress(event, file, fileList) {
      console.log(
        '%c [ fileList ]-471',
        'font-size:13px; background:pink; color:#bf2c9f;',
        fileList
      );
      console.log(
        '%c [ event ]-471',
        'font-size:13px; background:pink; color:#bf2c9f;',
        event
      );
      console.log(file.name);
    },
    uploadSuccess(response, file, fileList) {
      console.log(response);
      console.log(fileList);
      console.log(file.name);
      if (!('key' in response)) {
        return;
      }
      this.fileUploadList.splice(0, this.fileUploadList.length);
      fileList.forEach((v, i, a) => {
        v.url = `${this.qiniu.address}/${v.response.key}`;
        v.nfn = this.temp;
        this.fileUploadList.push(v);
      });
    }, // 上传成功
    uploadError() {
      this.$message.error(`图片上传失败`);
      return;
    },
    handleRemove(file, fileList) {
      this.fileUploadList.splice(0, this.fileUploadList.length);
      fileList.forEach((v, i, a) => {
        v.url = `${this.qiniu.address}/${v.response.key}`;
        this.fileUploadList.push(v);
      });
    },
    /* e 上传图片相关 */
  },
  beforeCreate: function () {}, // 实例初始化之后，数据观测和事件绑定之前
  created: function () {}, // 实例初始化完成，挂载尚未开始时
  beforeMount: function () {}, // 挂载之前，rander函数首次被调用时，常用于加载身份数据和一些后台可配置的选项
  mounted: function () {
    this.$api.getQiniuToken().then((res) => {
      console.log(
        '%c [ res ]-165',
        'font-size:13px; background:pink; color:#bf2c9f;',
        res
      );
      if (res.code == 200) {
        this.qiniu.token = res.data;
      }
    });
    console.log(document.getElementById('main'));
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption(this.testechartsopt);
  }, //在实例挂载到DOM节点上之后
  beforeUpdate: function () {}, // 数据更新时，在虚拟DOM状态变化之前
  updated: function () {}, // 虚拟DOM被重新渲染之后
  beforeDestroy: function () {}, // 实例销毁之前，此时实例依然可用
  destroyed: function () {}, // 实例销毁后，此时实例及其子实例将完全解绑
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}
</style>
